<template>
  <el-card header="抄送给我的">
    <el-form :inline="true" :model="queryParam">
      <el-form-item>
        <el-input
          v-model="queryParam.QueryKey"
          placeholder="标题"
          @change="load"
        />
      </el-form-item>
      <el-form-item>
        <el-radio-group v-model="queryParam.SearchType" @change="load">
          <el-radio-button :label="0">全部</el-radio-button>
          <el-radio-button :label="1">已读</el-radio-button>
          <el-radio-button :label="2">未读</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="queryParam.Begin" placeholder="开始日期" :clearable="true" value-format="yyyy-MM-dd" @change="load" />
        <span style="margin-left: 5px; margin-right: 5px;">至</span>
        <el-date-picker v-model="queryParam.End" placeholder="结束日期" :clearable="true" value-format="yyyy-MM-dd" @change="load" />
      </el-form-item>
    </el-form>
    <el-divider />
    <userMsgList :query="query" />
  </el-card>
</template>

<script>
import userMsgList from '@/components/msg/userMsgList.vue'
export default {
  components: {
    userMsgList
  },
  data() {
    return {
      queryParam: {
        QueryKey: null,
        SearchType: 0,
        Begin: null,
        End: null
      },
      query: {
        QueryKey: null,
        AppId: null,
        Priority: null,
        MsgClassify: '002',
        MsgType: 0,
        MsgStatus: null,
        IsRead: null,
        IsTimeOut: null,
        Tag: null,
        Begin: null,
        End: null
      }
    }
  },
  computed: {},
  mounted() {
  },
  methods: {
    load() {
      this.query.QueryKey = this.queryParam.QueryKey
      if (this.queryParam.SearchType === 0) {
        this.query.IsRead = null
      } else if (this.queryParam.SearchType === 1) {
        this.query.IsRead = true
      } else if (this.queryParam.SearchType === 2) {
        this.query.IsRead = false
      }
    }
  }
}
</script>
